<template>
  <view>
    <base-paging ref="paging" :add-fad="false" :datasource="datasource" :is-cust-top="true" :tabs="tabs">
      <template #default="{ list }">
        <view v-if="curTab.key == 'counted'" class="custom-search-input" @click="openSearch()" style="padding: 10rpx 20rpx; background-color: #fff;">
          <uni-easyinput :placeholder="`查询计划单`"
                         :styles="{ 'borderRadius': '10%', margin: '10rpx', padding: '20rpx', disableColor: '#fff', color: '#666666', textAlign: 'left' }"
                         disabled prefix-icon="search">
            <template #right>
              <text style="padding: 0 10rpx;color: #1763FC" @click.stop="openSearch()">搜索</text>
            </template>
          </uni-easyinput>
        </view>
        <template v-for="(item, index) in list" :key="index">
          <base-card :title="item.planOrderNo" style="padding: 0; margin-bottom: 20rpx;" @changeClick="changeClick(item)">
            <template #extra>
              <view style="color: #F66923">
                {{ item.status }}
              </view>
            </template>
            <view class="item-info">
              <text class="label">调度时间</text>
              <text class="value">{{ item.dispatchTime }}</text>
            </view>
            <view class="item-info">
              <text class="label">执行日期</text>
              <text class="value">{{ item.executeDate }}</text>
            </view>
            <view class="item-info">
              <uni-tag v-for="tag in getRepTags(item.vehiclePlates)"
                       :key="tag" :text="tag"
                       custom-style="background-color:#e6eeff; border-color: #e6eeff; color: #1763FC;margin-right:10rpx"
                       type="primary"/>
            </view>
            <view class="item-info">
              <text class="label">驾驶员</text>
              <text class="value">{{ item.drivers }}</text>
            </view>
            <view class="item-info">
              <text class="label">装卸员</text>
              <text class="value">{{ item.loUnPersonals }}</text>
            </view>
            <view class="item-info">
              <base-swiper-item :list="item.medicalInstitutionTypeGroups">
                <template #default="{ item:val = { key: '', value: '' } }">
                  <view class="jgdw" @click.stop="toBasePath('/plannedRoute/index?id=' + item.id)">
                    <view>{{ val.key }}类机构</view>
                    <view style="color: #1763FC">{{ val.value }}</view>
                  </view>
                </template>
              </base-swiper-item>
            </view>
            <template #actions>
              <task-btns :item="item" size="small" @done="() => this.reload()"/>
            </template>
          </base-card>
		  <view style="background-color: #f7f7f7;"></view>
        </template>
      </template>
    </base-paging>

  <search-info ref="search_info"  @done="searchDone"></search-info>
  </view>
</template>

<script>
import {Msg, toPath} from "@/utils/BaseUtils";
import {TaskPlanApi as Api} from "@/comms/api/taskPlanApi";
import ReturnFactory from "./returnFactory.vue";
import Departure from "./departure.vue";
import SelectDialog from "./select-dialog.vue";
import TaskBtns from "./task-btns.vue";
import SearchInfo from "./searchInfo.vue";
import SearchCustomer from "@/pages/tasks/plannedRoute/searchCustomer.vue";

export default {
  components: {SearchCustomer, ReturnFactory, Departure, SelectDialog, TaskBtns, SearchInfo},
  data() {
    return {
      toPath,
      curTab: {},
      // 页面数据状态("wait_receive","待接收"),("wait_review","待审核"),("reviewed","已审核"),("counted","已统计"),("canceled","已取消")
      tabs: [
        {key: 'wait_receive', name: '待接收',},
        {key: 'wait_review', name: '待审核'},
        {key: 'reviewed', name: '已审核'},
        {key: 'counted', name: '已统计'},
        {key: 'canceled', name: '已取消'},
      ],
      form: {
        location: "测试地址",
        enclosure: "100米",
        returnTime: '2023-03-15 12:30:00',
      },
      searchForm: {},
      alignment: 'top',
      FileList: [],
      vehicleList: []
    }
  },
  mounted() {
    this.reload()

    uni.$on("taskIndexReload", () => {
      this.reload();
    })
  },
  methods: {
    changeClick(data) {
      toPath('pages/tasks/jhdxq/jhdxq?id=' + data.id)
    },
    reload() {
      this.$refs.paging.reload();
    },
    datasource({pageNo, tab}) {
      this.curTab = tab;
      const params = {pageNo, pageDataType: tab.key};
      if (tab.key == 'counted') {
        const { planOrderNo, executeDate = []} = this.searchForm;
        planOrderNo && (params.planOrderNo = planOrderNo);
        executeDate[0] && (params.executeDateBegin = executeDate[0]||'');
        executeDate[1] && (params.executeDateEnd = executeDate[1]||'');
      }
      return Api.page(params)
    },
    remove({id}) {
      Msg.confirm("确定删除该维修申请信息?")
          .then(() => {
            Api.delete({id}).then(res => {
              this.reload();
              Msg.success("删除成功")
            })
          })
    },
    toBasePath(path) {
      toPath("/pages/tasks" + path)
    },
    getRepTags(tags) {
      return (tags || "").split(",")
    },
    openSearch() {
      this.$refs.search_info.open( { ...this.searchForm});
    },
    searchDone(data = {}) {
      this.searchForm = { ...data};
      this.reload();
    }
  }
}
</script>
<style>
	input {
	  text-align: left !important;
	}
</style>
<style lang="scss" scoped>
.uni-card {
  margin-bottom: 15rpx;
}
.item-info{
	padding: 5rpx 0;
}
.button-group {
  button {
    margin-left: 10rpx;
  }
}

:deep(.uni-dialog-button-text ) {
  color: #1763fc
}

:deep(.uni-forms) {
  width: 100% !important;
}

:deep(.uni-forms-item__content) {
  border: 2rpx solid #e6e6e6;
  border-radius: 10rpx;
  padding: 12rpx 20rpx;
}

:deep(.uni-forms-item:nth-child(4) .uni-forms-item__content) {
  border: none;
  border-radius: 10rpx;
  padding: 12rpx 20rpx;
}

:deep(.uni-forms-item--border) {
  border: none;
  padding: 0rpx;
}

:deep(.uni-card__header-content-title) {
  font-size: 28rpx;
}

:deep(.z-tabs-item) {
  padding: 0 0 36rpx;
  position: relative;
}

.cancel {
  font-size: 34rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: left;
  color: #999999;
  line-height: 48rpx;
  position: absolute;
  top: 32rpx;
  left: 40rpx;
}

:deep(.uni-border-left) {
  background: #1763fc;
}

:deep(.uni-dialog-title ) {
  padding-top: 32rpx;
}

.def-btn, .main-btn {
  padding: 14rpx 26rpx !important;
  margin: 0;
  line-height: 100%;
  height: 100%;
  font-size: 28rpx;
}

:deep(.paging-top-bg) {
  height: 280rpx !important;
  background-repeat: no-repeat;

}

:deep(.z-tabs-conatiner) {
  margin-top: 36rpx;
}

:deep(.uni-grid-item) {

}

:deep(.uni-dialog-button) {
  border: 2rpx solid #1763fc;
  border-radius: 10rpx;
  margin: 0 30rpx 30rpx;

  .uni-button-color {
    font-size: 28rpx !important;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: center;
    color: #1763fc !important;
  }
}

:deep(.uni-border-left) {
  .uni-button-color {
    font-size: 30rpx !important;;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: center !important;;
    color: #ffffff !important;
  }
}

:deep(.uni-card__header) {
  padding-bottom: 0rpx !important;
}

:deep(.uni-card__content) {
  line-height: 36rpx;
}

:deep(.uni-grid-wrap,.uni-grid) {
  height: 100% !important;
}

:deep(.grid-item-box) {
  width: 176rpx !important;
}

:deep(.uni-grid-wrap) {
  .grid-item:before {
    content: '';
    display: block;
    width: 2rpx;
    height: 40rpx;
    background: #b6b6b6;
    position: absolute;
    top: 40rpx;
  }

  .grid-item:nth-child(1):before {
    content: '';
    display: block;
    width: 2rpx;
    height: 40rpx;
    background: transparent;
    position: absolute;
    top: 50rpx;
  }
}

.jgdw {
  view:nth-child(1) {
    margin-bottom: 0rpx;
    padding-top: 10rpx !important;
  }

}

:deep(.uni-grid-item ) {
  height: 120rpx !important;
}

.jgdw:nth-child(2n) {
  background: red;
}

.label {
  margin-right: 20rpx;
}
.value{
	color: #333;
}

:deep(.base-card-content) view {
  margin-bottom: 0rpx !important;
}

</style>
